import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Progress, Rate, Icon, Modal } from 'antd';

import styles from './index.module.less';

export default class AccountSecurity extends Component {
  state = {
    visible: false,
  };

  showModal = () => {
    this.setState({ visible: true });
  }
  // 注销账号 狠心离开 事件
  handleCancel = () => {
    this.setState({ visible: true });
  }
  // 注销账号 再想想 事件
  handleCreate = () => {
    this.setState({ visible: false });
  }
  render() {
    return (
      <div style={{ backgroundColor: '#fff' }} className={styles.content}>
        <div className={styles.warn}>
          <div>
            <i className={`iconfont icon-laba ${styles.icon}`}></i>
            <span>温馨提示: 1.手机号码用于账户安全验证，不展示在您的联系方式中。</span>
          </div>
          <div className={styles.d2}>2.1个手机号码只能在1个账户下开启登录功能用于登录，无法在多个账户下同时开启登录。</div>
          <div className={styles.d2}>3.绑定邮箱，可享受通过邮箱找回密码等服务。</div>
        </div>
        <div className={styles.progressBox}>
          <span>您当前账号安全强度：</span>
          <Progress percent={30} showInfo={false} strokeColor='#1cae1d' className={styles.progress}/>
          <span className={styles.tipTitle}>初</span>
          <span className={styles.tipTitle2}>建议绑定邮箱并更改登录密码</span>
        </div>
        <div>
          <table>
            <tbody>
              <tr className={styles.firstTr}>
                <td className={styles.firstCol}>登录密码</td>
                <td className={styles.secondCol}>
                  <span>当前密码强度</span>
                  <Progress percent={100} showInfo={false} strokeColor='#ff0000' style={{ width: 30 }}/>
                  <Progress showInfo={false} style={{ width: 30 }} className={styles.pro1}/>
                  <Progress showInfo={false} style={{ width: 30 }} className={styles.pro2}/>
                  <span>低</span>
                  <div>
                  安全性高的密码可以使帐号更安全。建议您定期更换密码，设置一个包含字母，符号或数字中
                  至少两项且长度超过6位的密码。
                  </div>
                </td>
                <td className={styles.lastCol}>
                  <span>已设置</span>
                  <span className={styles.line}>|</span>
                  <span>修改</span>
                </td>
              </tr>
              <tr>
                <td className={styles.firstCol}>邮箱</td>
                <td>邮箱绑定后可用来接收蜂收部落发送的各类系统、服务通知。</td>
                <td className={styles.lastCol}>
                  <span>未绑定</span>
                  <span className={styles.line}>|</span>
                  <span>绑定</span>
                </td>
              </tr>
              <tr>
                <td className={styles.firstCol}>手机号</td>
                <td>
                  您已注册了手机151****7196 【您的手机为安全手机，可以找回密码和登录】如果你更换了手
                  机号，请及时更换登录账号
                </td>
                <td className={styles.lastCol}>
                  <span>已设置</span>
                  <span className={styles.line}>|</span>
                  <span>更换</span>
                </td>
              </tr>
              <tr>
                <td className={styles.firstCol}>支付密码</td>
                <td>为了您的账户安全，请及时设置支付密码，并定期更换支付密码。</td>
                <td className={styles.lastCol}>
                  <span>未设置</span>
                  <span className={styles.line}>|</span>
                  <span>更换</span>
                </td>
              </tr>
              <tr>
                <td className={styles.firstCol}>注销账号</td>
                <td>
                  如果您不再使用此账号，可以将其注销。账号成功注销后，其下所有服务、数据及隐私信息将会
                  被删除并将无法恢复。
                </td>
                <td className={styles.lastCol} onClick={this.showModal}>注销账号</td>
              </tr>
            </tbody>
          </table>
          <Modal
            visible={this.state.visible}
            title="温馨提示"
            cancelText="狠心离开"
            okText="再想想"
            onCancel={this.handleCancel}
            onOk={this.handleCreate}
          >
            <div>
              账号注销后，您将不能再以此账号登录蜂收部落电子商城，同时
              该账号下的所有数据信息将一同清空，请谨慎操作
            </div>
          </Modal>
        </div>
      </div>
    );
  }
}
